<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10400606") }}
    </PageTitle>
    <!-- body -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.appName"
            :placeholder="$t('appstore.application.appName')"
            clearable
          ></el-input>
        </el-form-item>
        <!--      <el-form-item>-->
        <!--        <el-input v-model="dataForm.developerName" :placeholder="$t('appstore.application.developerName')" clearable></el-input>-->
        <!--      </el-form-item>-->
        <el-form-item>
          <el-select
            v-model="dataForm.operatorStatus"
            clearable
            :placeholder="$t('operator.status')"
          >
            <el-option
              v-for="item in $t('appstore.examine.statusOption')"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList((pageNo = 1))" class="w-8">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="dataListLoading">
        <el-table-column
          prop="appIcon"
          width="400px"
          min-width="300px"
          :label="$t('developer_app.app')"
        >
          <template v-slot="{ row }">
            <div
              style="display: flex; flex-direction: row"
              class="cursor-pointer"
              @click="showDetailHandle(row.appId, row.appVersionId)"
            >
              <div class="app-logo2" style="margin-right: 10px">
                <img :src="iconView(row.appIcon)" class="app-logo" width="32px" />
              </div>
              <div>
                <div style="color: #12263f">
                  {{ row.appName }}
                </div>
                <div style="color: #95aac9 !important">
                  {{ row.appVersionName }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          min-width="140px"
          :label="$t('developer_app.version_status')"
        >
          <template v-slot="scope">
            <el-tag
              v-if="
                scope.row.appVersionStatus === -1 ||
                scope.row.appVersionStatus === 0 ||
                scope.row.appVersionStatus === 2 ||
                scope.row.appVersionStatus === 6
              "
              size="small"
              type="warning"
              >{{ handleStatus(scope.row.appVersionStatus) }}
            </el-tag>
            <el-tag v-if="scope.row.appVersionStatus === 1" size="small" type="success">
              {{ handleStatus(scope.row.appVersionStatus) }}
            </el-tag>
            <el-tag
              v-if="
                scope.row.appVersionStatus === 5 ||
                scope.row.appVersionStatus === 7 ||
                scope.row.appVersionStatus === 9
              "
              size="small"
              type="private"
              >{{ handleStatus(scope.row.appVersionStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="submitTime"
          min-width="100"
          :label="$t('appstore.examine.submitTime')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.submitTime)">
              {{ dateFilter(scope.row.submitTime) }}
              {{ scope.row.submitTime ? "" : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          min-width="120"
          :label="$t('appstore.application.status')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="info">{{
              $t("appstore.examine.status0")
            }}</el-tag>
            <el-tag v-if="scope.row.status === 1" size="small">{{
              $t("appstore.examine.status1")
            }}</el-tag>
            <el-tag v-if="scope.row.status === 2" size="small" type="danger"
              >{{ $t("appstore.examine.status2") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 3" size="small" type="warning"
              >{{ $t("appstore.examine.status3") }}
            </el-tag>
            <el-tag size="small"
              >({{ scope.row.tested }}/{{ scope.row.totalModelCode }})</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="remark" min-width="120" :label="$t('common.remark')">
        </el-table-column>
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="showDetailHandle(scope.row.appId, scope.row.appVersionId)"
                  >
                    {{ $t("common.detail") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    @click="complete(scope.row)"
                    v-show="
                      scope.row.showCompleteFlag == 1 &&
                      (scope.row.status === 0 || scope.row.status === 3) &&
                      isAuth('10400606.MANAGE')
                    "
                  >
                    {{ $t("operator.verify") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <!-- <el-button
              type="text"
              @click="showDetailHandle(scope.row.appId, scope.row.appVersionId)"
            >
              {{ $t('developer.operate_detail') }}
            </el-button>
            <el-button
              v-show="
                scope.row.showCompleteFlag == 1 &&
                (scope.row.status === 0 || scope.row.status === 3) &&
                isAuth('10400606.MANAGE')
              "
              type="text"
              @click="complete(scope.row)"
              >{{ $t('operator.verify') }}
            </el-button> -->
            <!--          <el-button v-show="scope.row.showCompleteFlag==1 && (scope.row.status === 0 || scope.row.status === 3)" type="text" @click="complete(scope.row.appId, scope.row.appVersionId, 1, scope.row)">{{ $t('appstore.examine.reject') }}</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :close-on-click-modal="false"
      v-model="visible"
      :title="$t('operator.verify')"
      width="40%"
    >
      <el-form :model="testForm" ref="testForm">
        <el-row style="margin: 20px 0px">
          <el-col :span="10">
            <span style="font-size: 20px; color: #99a9bf"
              >{{ $t("appstore.examine.tested_tip") }}
            </span>
            <span style="font-size: 20px; color: #99a9bf">{{ testForm.tested }} </span>
          </el-col>
          <el-col :span="10">
            <span style="font-size: 20px; color: #99a9bf"
              >{{ $t("appstore.examine.testing_tip") }}
            </span>
            <span style="font-size: 20px; color: #99a9bf">{{ testForm.testing }} </span>
          </el-col>
        </el-row>

        <el-row style="margin: 20px 0px">
          <el-col :span="10">
            <span style="font-size: 20px; color: #99a9bf"
              >{{ $t("appstore.examine.passed_tip") }}
            </span>
            <span style="font-size: 20px; color: #99a9bf">{{ testForm.passed }} </span>
          </el-col>
          <el-col :span="10">
            <span style="font-size: 20px; color: #99a9bf"
              >{{ $t("appstore.examine.rejected_tip") }}
            </span>
            <span style="font-size: 20px; color: #99a9bf">{{ testForm.rejected }} </span>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="realComplete(1, row)">{{
            $t("appstore.examine.reject")
          }}</el-button>
          <el-button
            type="primary"
            :loading="passLoading"
            @click="realComplete(0, row)"
            >{{ $t("appstore.examine.pass") }}</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visible2"
      :title="$t('contact.refuse_reason')"
      width="40%"
    >
      <el-form>
        <el-input
          type="textarea"
          class="center"
          :rows="10"
          :maxlength="512"
          v-model="remark"
          @blur="() => (remark = remark.trim())"
        ></el-input>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button text @click="cancel1">{{ $t("common.cancel") }}</el-button>
          <el-button type="primary" :loading="rejectLoading" @click="reject(1, row)">{{
            $t("common.submit")
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { examList, examListComplete } from "@/api/developer-app";
import { formatDate } from "@/utils/formatDate";
import { timeFilter, dateFilter } from "@/filters/index";
import { isAuth } from "@/utils";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  name: "AppstoreTest",
  components: {
    PageTitle,
  },
  data() {
    return {
      dataForm: {
        appName: "",
        developerName: "",
        chargeStrategy: "",
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      examineDetailVisible: false,
      dataListLoading: false,
      rejectLoading: false,
      passLoading: false,
      showCompleteFlag: 0,
      visible: false,
      visible2: false,
      row: {},
      testForm: {
        tested: 0,
        testing: 0,
        passed: 0,
        rejected: 0,
      },
      remark: "",
    };
  },
  mounted() {
    this.$store.commit("app/ADD_KEEP_ALIVE_LIST", "AppstoreTest");
    this.getDataList();
  },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    if (to.name !== "testDetail") {
      this.$store.commit("app/REMOVE_KEEP_ALIVE_LIST", "AppstoreTest");
    }
    next();
  },
  methods: {
    timeFilter,
    dateFilter,
    iconView(icon) {
      if (icon) {
        return import.meta.env.VITE_APP_BASE_API + icon;
      }
      return require("@/assets/img/Android.png");
    },
    getDataList() {
      this.dataListLoading = true;
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        appName: this.dataForm.appName,
        status: this.dataForm.operatorStatus,
        // developerName: this.dataForm.developerName
      };
      examList(params)
        .then((data) => {
          this.dataList = data.data;
          this.rows = data.rows;
          this.dataListLoading = false;
        })
        .catch((e) => {
          this.$confirmError(e);
          this.dataListLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getDataList();
    },
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getDataList();
    },
    showDetailHandle(appId, appVersionId) {
      this.$router.push({
        path: `/appstore/test/test-detail`,
        query: {
          appId: appId,
          appVersionId: appVersionId,
        },
      });
    },
    showExamineDetail() {
      this.$router.push({
        name: "examine-record",
      });
    },
    formatDate(row, column, cellValue, index) {
      return formatDate(cellValue, "YYYY-MM-DD HH:mm:ss");
    },

    complete(row) {
      this.visible = true;
      this.testForm.tested = row.tested;
      this.testForm.testing = row.testing;
      this.testForm.passed = row.passed;
      this.testForm.rejected = row.rejected;
      this.row = row;
    },
    realComplete(completeFlag, row) {
      if (completeFlag === 0) {
        this.$confirm(this.$t("appstore.examine.comfirm_pass"), this.$t("common.tip"), {
          confirmButtonText: this.$t("bar.confirm"),
          cancelButtonText: this.$t("bar.cancel"),
          type: "warning",
        }).then(() => {
          this.passLoading = true;
          examListComplete({
            appId: row.appId,
            appVersionId: row.appVersionId,
            completeFlag: completeFlag,
          })
            .then((data) => {
              this.getDataList();
              this.visible = false;
              this.passLoading = false;
            })
            .catch((e) => {
              this.passLoading = false;
              this.$confirmError(e);
              console.log(`err:${JSON.stringify(e)}`);
            });
        });
      } else {
        this.visible = false;
        this.visible2 = true;
      }
    },
    reject(completeFlag, row) {
      if (!this.remark) {
        this.$message.warning(
          this.$t("developer_app.initial_examine.examine_result_explain")
        );
        return;
      }
      this.rejectLoading = true;
      examListComplete({
        appId: row.appId,
        appVersionId: row.appVersionId,
        completeFlag: completeFlag,
        remark: this.remark,
      })
        .then((data) => {
          this.getDataList();
          this.visible2 = false;
          this.remark = "";
          this.rejectLoading = false;
        })
        .catch((e) => {
          this.$confirmError(e);
          this.rejectLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    cancel() {
      this.visible = false;
    },
    cancel1() {
      this.visible2 = false;
    },
    handleStatus(status) {
      if (status === 9) {
        return this.$t("developer_app.version_status_option[0].label");
      } else if (status === 7) {
        return this.$t("developer_app.version_status_option[1].label");
      } else if (status === 6) {
        return this.$t("developer_app.version_status_option[2].label");
      } else if (status === 5) {
        return this.$t("developer_app.version_status_option[3].label");
      } else if (status === 2) {
        return this.$t("developer_app.version_status_option[4].label");
      } else if (status === 1) {
        return this.$t("developer_app.version_status_option[5].label");
      } else if (status === 0) {
        return this.$t("developer_app.version_status_option[6].label");
      } else if (status === -1) {
        return this.$t("developer_app.version_status_option[7].label");
      }
    },
    isAuth,
  },
};
</script>
<style lang="scss" scoped></style>
